<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
            <p slot="title">
                表格-合并行
            </p>
          <Row>
            <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom"></Table>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import circleLoading from "@/views/my-components/circle-loading.vue";
export default {
  name: "table-rowspan",
  components: {
    circleLoading,
  },
  data() {
   function addrows(h,htmlArr){
        var rowsArr=[];
            for(let i=0,len=htmlArr.length;i<len;i++){
                if(i!=len-1){
                rowsArr.push(
                    h(
                        "div",
                        {
                            attrs: {
                                class:"rowspan__child rowspan__child--border"
                            },
                        },
                        htmlArr[i]
                    )
                )
                }else{
                    rowsArr.push(
                    h(
                        "div",
                        {
                            attrs: {
                                class:"rowspan__child"
                            },
                        },
                        htmlArr[i]
                    )
                )   
                }
            }
            return h("div", 
            {
                attrs:{
                    class:"rowspan__parent"
                }
            },
            rowsArr
        );
    };  
    return {
      loading: true, // 表单加载状态
      columns: [
        // 表头
        {
          type: "index",
          width: 80,
          title:"序号",
          fixed:"left",
          align: "center"
        },
        {
          title:"职工编号",
          key: "teacherNo",
          minWidth: 120,
          fixed:"left",
          sortable: false,
        },
        {
          title:"姓名",
          key: "name",
          fixed:"left",
          minWidth: 120,
          sortable: false,
        },
        {
          title:"教师性质",
          key: "teacherType",
          minWidth: 120,
          sortable: false,
        },
        {
          title:"级别",
          key: "level",
          minWidth: 120,
          sortable: false,
        },
        {
          title:"课程",
          key: "course",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
              var htmlArr=params.row.course;
              return addrows(h,htmlArr);
          }
        },
        {
          title:"班级人数",
          key: "classTotal",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
              var htmlArr=params.row.classTotal;
              return addrows(h,htmlArr);
          }
        },
        {
          title:"月课时",
          key: "monthHours",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
              var htmlArr=params.row.monthHours;
              return addrows(h,htmlArr);
          }
        },
        {
          title:"监考课时",
          key: "invigilate",
          minWidth: 120,
          sortable: false,
        },
        {
          title:"其他",
          key: "other",
          minWidth: 120,
          sortable: false,
        },
        {
          title:"课时费",
          key: "salaryHours",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
              var htmlArr=params.row.salaryHours;
              return addrows(h,htmlArr);
          }
          
        },
        {
          title:"实发金额",
          key: "salary",
          minWidth: 120,
          sortable: false,
          render: (h, params) => {
              var htmlArr=params.row.salary;
              return addrows(h,htmlArr);
          }
        },
        {
          title:"合计",
          key: "total",
          minWidth: 120,
          sortable: false,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 240,
          fixed:"right",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                    icon: "ios-create-outline"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "课时调整"
              ),
            ]);
          }
        }
      ],
      data: [], // 表单数据
    };
  },
  methods: {
    init() {
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      this.data=new Array(4).fill(
            {
              "teacherNo":"181211001",
              "name":"张三",
              "teacherType":"本校",
              "level":"一级",
              "course":["机电一体化","商务礼仪"],
              "classTotal":[23,36],
              "monthHours":[9,10],
              "invigilate":9,
              "other":"",
              "salaryHours":[52,52],
              "salary":[500,500],
              "total":1000
          }
      );
      this.total = this.data.length;
      this.loading = false;
    },
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less">
.rowspan__parent{
    margin: 0 -20px;
}
.rowspan__child{
    padding: 10px 20px;
}
.rowspan__child--border{
    border-bottom:1px solid #E8EAEC;
}

</style>